<!DOCTYPE HTML>
<html>

<head>
    <title>Example</title>
    <style>
        table {
            border-collapse: collapse;
            border: thin solid black;
        }

        th,
        td {
            padding: 4px;
        }
    </style>
</head>

<body>

    <button id="alert">Alert</button>
    <button id="confirm">Confirm</button>
    <button id="prompt">Prompt</button>
    <button id="modal">Modal Dialog</button>

    <script type="text/javascript">

        var buttons = document.getElementsByTagName("button");
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].onclick = handleButtonPress;
        }

        function handleButtonPress(e) {
            if (e.target.id == "alert") {
                // 弹窗只有等关
                window.alert("This is an alert");
            } else if (e.target.id == "confirm") {
                // 弹窗 带确定和取消
                var confirmed
                    = window.confirm("This is a confirm - do you want to proceed?");
                alert("Confirmed? " + confirmed);
            } else if (e.target.id == "prompt") {
                // 提示输入一个值
                var response = window.prompt("Enter a word", "hello");
                alert("The word was " + response);
            } else if (e.target.id == "modal") {
                // 弹出窗口，显示url(失效)
                window.showModalDialog("http://apress.com");
            }
        }
    </script>
</body>

</html>